<script setup lang='ts'>
import { ref, onMounted, watch} from 'vue'
import { RouterLink, useRoute } from 'vue-router';
import { searchAPI } from '../../apis/common';
import { useSearchStore } from '../../stores/search';

const route = useRoute()
const list = ref([])

const search = async () => {
  const res = await searchAPI(route.query.query)
  list.value = res.data
}

watch(route, () => {
  search()
})

onMounted(() => {
  search()
  document.title = '笔趣阁_搜索小说'

})
</script>

<template>

  <div class="">
    <div class="flex w-full mt-3">
      <div class="flex flex-col w-full min-h-full">
        <div class="border-2 border-blue-300">
          <h2 class="flex items-center w-full h-10 px-2 text-sm text-gray-700 border-b border-gray-300 bg-color-s2">
            与“{{ route.query.query }} ”相关的小说 - (最多显示100条)
          </h2>
          <div
            v-if="list"
            class="grid w-full grid-cols-2 gap-3 px-3 py-3 min-h-20"
          >
            <div
              class="flex items-center py-1 border border-blue-200 rounded-md even:ml-1 odd:mr-1 bg-orange-50 box"
              v-for="item in list"
              :key="item.id"
            >
              <div style="width: 16%;" class="flex items-center mx-2 text-xs border-2 border-blue-300 rounded-sm lg:block sm:border-0 lg:w-64 sm:hidden">
                <RouterLink :to="{ path: '/book/' + item.id }">
                  <img
                    class="w-auto h-28 min-w-fit"
                    :src="item.picture"
                  >
                </RouterLink>
              </div>
              <div style="width: 84%;" class="box-border h-full px-1 pt-1 text-left text-gray-400 sm:pl-3">
                <h4 class="w-48 mt-0.5 text-sm font-bold text-blue-900 opacity-70 nowrap ">
                  <RouterLink :to="{ path: '/book/' + item.id }">
                    {{ item.name }}
                  </RouterLink>
                </h4>
                <div class="text-sm text-left text-gray-400 w-52 nowrap">作者：{{ item.author }}</div>
                <div class="h-auto pt-1 overflow-y-hidden text-sm text-gray-400 nowrap lg:pr-0">
                  {{ item.simple }}</div>
              </div>
            </div>

          </div>
          <div
            v-else
            class="w-full px-3 py-3 min-h-20"
          >
            <div class="pt-2 text-center">
              暂无!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped lang='scss'>
.norwap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-92 {
  width: 23rem;
}
</style>